<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 语法糖-全局组件 -->
			<cpn1></cpn1>
			<!-- 语法糖-局部组件 -->
			<cpn2></cpn2>
			<cpn2></cpn2>
			
		</div>
		
		<script src="../utils/vue.js"></script>
		<script>
			/*语法糖写法省略了Vue.extend()*/
			Vue.component('cpn1',{
				template:`
					<div>
						<h2>vue组件的语法糖写法--全局组件</h2>
						<p>我是自定义组件2</p>
						<p>我特别棒</p>
					</div>
				`
			});
			
			var vm = new Vue({ //vm相当于顶层组件root
				el:"#app",
				data:{
				},
				components:{
					cpn2:{
						template:`
							<div>
								<h2>vue组件的语法糖写法--局部组件</h2>
								<p>我是自定义组件2</p>
								<p>我特别棒</p>
							</div>
						`
					}
				}
			})
		</script>
	</body>
</html>
